<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>

</style>
  <body>
      <div id="root"></div>
      <script type="text/babel">
        class Hello extends React.Component {
          state={
            name:'Hello',
            sex:'2',
            text:'hello wode',
            select:'',
            select1:'',
          }
          handelClick=(e)=>{
            e.preventDefault()
              alert(JSON.stringify(this.state))
            }
            handelChange=(e)=>{
              let name = e.target.name
              console.log(e.target.value,'e.target.value')
              // 这俩种方法在传key时都必须使用中括号包裹
              // this.setState({[e.target.dataset.id]:e.target.value})
              this.setState({[name]:e.target.value})
            }
          render(){
            let {name,sex,text,select,select1} = this.state
            let arr = ['A','B','C']
            let arr1 = [{id:1,color:'red'},{id:2,color:'blue'},{id:3,color:'green'}]
            return <div> 
              <form action="">
                姓名：<input type="text" defaultValue={name} name='name' onChange={this.handelChange}/><br/>
                性别：<label><input type="radio" value='1' name='sex' data='sex' defaultChecked={this.state.sex == '1'} onChange={this.handelChange}/>男</label>
                <label><input type="radio" value='2' name='sex' data='sex'  defaultChecked={this.state.sex == '2'} onChange={this.handelChange}/>女</label><br/>
                循环出来的select
                <select defaultValue={select} name='select' onChange={this.handelChange}>
                  {arr.map((item,index)=><option key={index} value={item}>{item}</option>)}
                </select><br/>
                循环数组对象出来的select
                <select defaultValue={select1} name='select1' onChange={this.handelChange}>
                 {arr1.map(item=> <option key={item.id} value={item.id}>{item.color}</option>)}
                </select><br/>
                备注：<textarea defaultValue={text} cols="30" rows="3" name='text' onChange={this.handelChange}></textarea><br/>
                <button onClick={this.handelClick}>提交</button>
                </form>
                </div>
          }
        }
        ReactDOM.render(<Hello />, document.getElementById("root"))
      </script>
  </body>
</html>
